<template>
  <div class="wx-input">
    <input
      class="wx-input__number"
      :disabled="disabled"
      :readonly="readonly"
      @input="handleInput"
      @blur="handleBlur"
    />
  </div>
</template>

<script lang="ts">
import { defineComponent, watch, getCurrentInstance } from 'vue'
import { useInput } from './useInput'

export default defineComponent({
  props: {
    modelValue: {
      type: [Number, String],
      default: 1
    },
    initValue: {
      type: [Number, String]
    },
    max: {
      type: [Number, String],
      default: Infinity
    },
    min: {
      type: [Number, String],
      default: 0.01
    },
    disabled: {
      type: Boolean,
      default: false
    },
    readonly: {
      type: Boolean,
      default: false
    },
    integer: {
      type: Boolean,
      default: false
    }
  },
  emits: [
    'update:modelValue',
    'on-change'
  ],
  setup(props, { emit }) {
    const { handleInput, handleBlur, currentValue } = useInput(props)

   watch(currentValue, (value) => {
     emit('update:modelValue', value)
     emit('on-change', value)
   })

   return {
      handleInput,
      handleBlur,
      currentValue
    }
  }
})
</script>
